<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新增相亲对象</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <form class="form-horizontal" id="fm1" role="form">
                <div class="form-group">
                    <label for="ip1" class="col-sm-2 control-label">姓名</label>
                    <div class="col-sm-10">
                        <input type="text" name="name" class="form-control" id="ip1" />
                    </div>
                </div>
                <div class="form-group">
                    <label for="ip2" class="col-sm-2 control-label">年纪</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="ip2" name="age" placeholder="请输入美女年纪" />
                    </div>
                </div>
                <div class="form-group">
                    <label for="ip3" class="col-sm-2 control-label">图片</label>
                    <div class="col-sm-5">
                        <input type="text" class="form-control" name="imgpath" id="ip3" placeholder="请输入美女照片路径" />
                    </div>
                    <div class="col-sm-5">
                        <img src="../img/z8.jpg" width="200" height="200" alt="" id="img1"/>
                    </div>
                </div>
                <div class="form-group">
                    <label for="ip4" class="col-sm-2 control-label">类型</label>
                    <div class="col-sm-10">
                       <select name="type" class="form-control" id="ip4">
                           <option value="1">可爱型</option>
                           <option value="2">成熟型</option>
                           <option value="3">温柔型</option>
                       </select>
                    </div>
                </div>
                <div class="form-group">
                    <label for="ip5" class="col-sm-2 control-label">描述</label>
                    <div class="col-sm-10">
                        <textarea class="form-control" rows="5" cols="20" name="comment" id="ip5" placeholder="请输入美女的特征" ></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="button" class="btn btn-default" id="btn1">新增美女</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script>
    $(function(){
        //绑定输入框的change事件
        $("#ip3").change(function(){
            var path=$("#ip3").val();
            console.log(path);
            if(path.length>0){
            //js 的标签对象 和jquery的标签对象
                $("#img1")[0].src=path;
            }
        });
        //绑定按钮的点击事件
        $("#btn1").click(function(){
        console.log($("#fm1").serialize());
            $.post("/api/goods/add",$("#fm1").serialize(),function(res){
            if(res==200){
              //添加成功
              location.href="goodslist.html";
            }else{
              alert("亲，网络异常，请重试！");
            }
        })
        });
    });
</script>
</body>
</html>